<template>
  <main-card title="标签组管理" :crumbs="crumbs">
    <template #tool-btn>
      <a-space :size="8">
        <a-button type="primary" @click="createGroup">
          <span class="text">创建标签组</span>
        </a-button>
      </a-space>
    </template>

    <div class="mb-48 fbc">
      <a-input
        v-model:value="pageForm.name"
        v-trim
        class="h-36"
        allow-clear
        placeholder="请输入名称"
        style="width: 328px"
        @keyup.enter="getDataList({ offset: 1 })"
      >
        <template #prefix> <i class="iconfont icon-search-line"></i> </template>
      </a-input>
    </div>

    <a-table
      :columns="tableColumns"
      :data-source="dataList"
      :custom-row="goDetail"
      :pagination="false"
      :style="{ width: '100%' }"
      :loading="loading"
      @change="tableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'tools'">
          <div v-if="record.id === '1'"></div>
          <a-dropdown v-else @click.stop>
            <div class="more-btn"><i class="iconfont icon-more-line btn-icon"></i></div>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="editGroup(record)">
                  <a>编辑</a>
                </a-menu-item>
                <a-menu-item @click="openDeleteTaskModal(record.id)">
                  <a>删除</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
        <template v-else-if="column.dataIndex === 'createTime'">
          {{ record.id === '1' ? '/' : record[column.dataIndex] }}
        </template>
        <template v-else>
          {{ replaceEmptyStr(record[column.dataIndex as string]) }}
        </template>
      </template>
    </a-table>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </main-card>

  <edit-model ref="editModelRef" :after-close-fn="getDataList" />
</template>

<script lang="ts" setup>
  import { message, Modal, TableProps } from 'ant-design-vue'
  import { ref } from 'vue'
  import { createVNode } from 'vue'
  import { useRouter } from 'vue-router'

  import WarnIcon from '@/components/icon/IconWarning/index.vue'
  import MainCard from '@/components/MainCard/index.vue'
  import useList from '@/hooks/use-list'
  import { dmpTaskApi } from '@/services'
  import { filterTableColumns, replaceEmptyStr } from '@/utils'

  import EditModel from './components/EditModel.vue'

  const router = useRouter()

  const crumbs = ref([{ name: '数据标注', path: '/dmp/task-list' }, { name: '标签组管理' }])

  const tableColumns = ref(
    filterTableColumns([
      {
        title: '名称',
        dataIndex: 'name',
        width: 220
      },
      {
        title: '描述',
        dataIndex: 'description'
      },
      {
        title: '标签数',
        dataIndex: 'labelNum',
        width: 280
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        isSort: true,
        width: 280
      },
      {
        title: '操作',
        dataIndex: 'tools',
        width: 63
      }
    ])
  )

  const { getDataList, loading, pageForm, dataList } = useList(dmpTaskApi.tagGroupList, {
    name: '',
    columns: 'createTime',
    order: ''
  })

  const tableChange: TableProps['onChange'] = (pagination, filters: any, sorter: any) => {
    pageForm.value.columns = sorter.field === 'updateTime' ? 'updateTime' : 'createTime'
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'
    getDataList({ offset: 1 })
  }

  const goDetail = (record: { taskType: 1 | 2; id: string; status: number }) => {
    return {
      onClick: () => {
        router.push(`/dmp/tag-group-detail/${record.id}`)
      }
    }
  }

  /* 新增or编辑------------------------------------------------------------------------------------------------- */
  const editModelRef = ref<InstanceType<typeof EditModel>>()
  const createGroup = () => {
    editModelRef.value?.open()
  }
  const editGroup = (record: any) => {
    editModelRef.value?.open(record)
  }
  /* 删除 ----------------------------------------------------------------- */
  const openDeleteTaskModal = (id: string) => {
    Modal.confirm({
      title: `确定删除?`,
      icon: createVNode(WarnIcon),
      content: '当前标签组及所有组内标签将被删除，且不可恢复，请确认操作',
      okText: '确定',
      cancelText: '取消',
      centered: true,
      onOk: async () => {
        await dmpTaskApi.tagGroupDel({}, { urlParams: { id }, isAddUid: true })
        message.success('删除成功')
        getDataList()
      }
    })
  }
  /* ---------------------------------------------------------------------------------------------------------- */
  getDataList()
</script>

<style lang="less" scoped></style>
